<template>
    <div class="packageManager" id="packageManager">
        <el-row class="condition-search">
            <div class="demo-input-suffix">
                <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAdd">添加</el-button>
            </div>
        </el-row>
        <el-table :data="tableData" v-loading="listLoading" border stripe style="width: 100%" @selection-change="handleSelectionChange" >
            <el-table-column prop="id" type="selection" width="150" label="全选" align="center">
                <!-- <template slot-scope="scope">{{scope.row.id}}</template> -->
            </el-table-column>
            <el-table-column prop="name" label="项目名称" width="" align="center" ></el-table-column>
            <!-- <el-table-column prop="price" label="单价(元)" align="center" width=""></el-table-column> -->
            <el-table-column prop="professional" label="所属专业" align="center"></el-table-column>
            <el-table-column prop="total_money" label="单价(元)" align="center"></el-table-column>
            <!--<el-table-column prop="professionales_id" label="操作" align="center"></el-table-column>-->
            <el-table-column label="操作" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" plain type="warning" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :title="formEditTitle" :visible.sync="dialogFormVisible" class="popup-models">
            <el-form :model="form" :disabled="formEditDisabled">
                <el-form-item label="名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" auto-complete="off"></el-input>
                </el-form-item>
                <!-- <el-form-item label="单价" :label-width="formLabelWidth"><el-input v-model="form.price" auto-complete="off"></el-input></el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitDetail">保存</el-button>
                <el-button @click="dialogFormVisible = false">返回</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import apis from '../apis/apis';
    export default {
        data() {
            return {
                formEditTitle: '收费项目信息',
                formEditDisabled: false,
                dialogFormVisible: false,
                formLabelWidth: '120px',
                listLoading: false,
                currRowData: {},
                pageInfo: {
                    currentPage: 1,
                    pageSize: 15,
                    pageTotal: 80
                }, //分页
                formSearch: {
                    name: '',
                    city: '',
                    type: null,
                    age: '',
                    gender: null,
                    qq: '',
                    startdate: null,
                    enddate: null
                }, //表单查询
                formEdit: {
                    id: null,
                    name: '',
                    city: '',
                    type: '',
                    age: '',
                    gender: null,
                    qq: ''
                }, //表单编辑
                form: {
                    name: ''
                },
                tableData: []
            };
        },
        mounted() {
            this.onSearch();
        },
        methods: {
            onSearch() {
                var self = this;
                apis.contApi.getAllPackageList().then((data) => {
                    self.pageInfo.pageTotal = data.data.data.count;
                    self.tableData = data.data.data.chargingItems;
                }).catch((error) => {
                    console.error(error);
                });
            },
            /* 点击选择 */
            handleSelectionChange(val) {
                console.info(val);
            },
            /** 打开详情页 */
            openDetail(row) {
                this.$common.OpenNewPage(this, 'detail', row);
            },
            handleAdd(index, rowData) {
                var self = this;
                self.$common.setSessionStorage('template', rowData);
                self.$router.push({
                    path: '/packageAdd'
                });
            },
            /** 打开详情页 */
            handleDetail(index, rowData) {
                var self = this;
                self.$common.setSessionStorage('template', rowData);
                self.$router.push({
                    path: '/packageDetail'
                });
            },
            /** 打开编辑弹窗 */
            handleEdit(index, rowData) {
                var self = this;
                self.$common.setSessionStorage('template', rowData);
                self.$router.push({
                    path: '/packageEdit'
                });
            },
            /* 提交详情 */
            submitDetail() {
                var self = this;
                self.dialogFormVisible = false;
                console.log(self.form);
                apis.contApi.addChargingItems(self.form).then((data) => {
                    console.info(data);
                }).catch((error) => {
                    console.error(error);
                });
            }
        }
    };
</script>

<style scoped="scoped">

    .hongbao_zanzhu {
        display: block;
        position: fixed;
        text-align: center;
        bottom: 336px;
        width: 230px;
        right: 0;
        font-size: 23px;
        color: #505458;
    }

    .hongbao {
        position: fixed;
        bottom: 0;
        right: 0;
        height: 330px;
        width: 230px;
    }

    .content_inner .el-table th>.cell {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    .content_inner .el-table th>.cell .el-dropdown {
        width: 100%;
    }

    .content_inner .el-table th>.cell .el-dropdown span.el-dropdown-link.el-dropdown-selfdefine {
        width: 100%;
    }

    .el-dropdown-menu.el-popper {
        width: 180px;
    }

    .el-breadcrumb {
        padding: 5px 0 0px;
    }

    .el-pagination {
        margin: 20px 0 10px;
        text-align: right;
    }
    /* 条件筛选*/

    .condition-search {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin: 10px 0;
        height: 35px;
        width: 100%;
        text-align: left;
    }

    .condition-search>.demo-input-suffix {
        display: inline-flex;
    }

    .condition-search>.demo-input-suffix:first-child {
        position: absolute;
        left: 0;
    }

    .condition-search>.demo-input-suffix input,
    .condition-search>.demo-input-suffix button {
        height: 32px;
    }

    .condition-search>.demo-input-suffix:first-child input.el-input__inner {
        border-radius: 3px 0 0 3px;
    }

    .condition-search>.demo-input-suffix:first-child button.el-button.el-button--primary.el-button--mini {
        border-radius: 0 3px 3px 0;
    }

    .condition-search>.demo-input-suffix:last-child {
        position: absolute;
        right: 0;
        display: flex;
        justify-content: flex-end;
    }

    .popup-models>div {
        width: 450px;
    }
</style>
